<script setup>
  import { onMounted, ref } from 'vue'
  import { useUserStore } from '@/stores/user'
  const userStore = useUserStore();

  const tmAnswerList = ref([
    { label: 'A', field: 'a' },
    { label: 'B', field: 'b' },
    { label: 'C', field: 'c' },
    { label: 'D', field: 'd' }
  ])


  const props = defineProps({
    detail: Object,
    mode: String,
    can: Boolean
  })
  onMounted(() => {

  })

</script>

<template>
  <div v-if="props.detail.title" class="tm-box">
    <div class="tm-box-title">{{ props.detail.title }}</div>
    <van-radio-group :disabled="!userStore.canAnswerFlag" v-model="userStore.answer">
      <van-radio
        v-for="(item,index) in tmAnswerList"
        :key="index"
        :name="item.label"
        class="tm-box-item"
      >{{ item.label }}、{{ props.detail[item.field] }}</van-radio>
    </van-radio-group>
  </div>
  <div v-else class="tm-null">
    还未出题！
  </div>
</template>

<style lang="scss">
.tm-box{
  &-title{
    margin-bottom: 40px;
    font-size: 18px;
    letter-spacing: 2px;
  }
  &-item{
    margin-bottom: 30px;
  }
  .van-radio__label{
    font-size: 16px;
  }
  .van-radio__label--disabled{
    color: #363636;
  }
}
</style>
